<template>
    <div id="player">
        <div class="player-main no-drag" id="player-show">
            <d-player :options="playerOptions" @play="play" ref="player"></d-player>
        </div>
        <div id="buttom">
            <!--<button  @click="switchHandle">asdasd</button>-->
            <!--<span id="stats"></span>-->

            <span class="item">
                <div class="input-wrapper">
                    <input type="text" placeholder="输入视频链接" class="no-drag" v-model="inputUrl">
                    <div class="input-group-append no-drag togo" @click="playUrl">
                        <span>播 放</span>
                    </div>
                </div>
            </span>
            <span class="item no-drag">
                <div class="no-drag-div-left"></div>
                <div class="no-drag-div-right"></div>
            </span>
        </div>
    </div>
</template>

<script>
    var dpPlayer;

    export default {
        name: "Player",
        data () {
            return {
                // inputUrl: 'http:/video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8',
                inputUrl: 'http://h5player.bytedance.com/video/mp4/xgplayer-demo-360p.mp4',
                player: null,
                playerOptions: {
                    autoplay: false,
                    theme: '#FADFA3',
                    loop: false,
                    lang: 'zh-cn',
                    screenshot: true,
                    hotkey: true,
                    preload: 'auto',
                    volume: 0.1,
                    mutex: true,
                    video: {
                        type: 'auto'
                    },
                    hlsjsConfig: {
                    debug: true,
                        // Other hlsjsConfig options provided by hls.js
                        p2pConfig: {
                            logLevel: true,
                            // Other p2pConfig options provided by CDNBye
                            // https://docs.cdnbye.com/#/API
                        }
                    },
                    player: null
                }
            }
        },
        mounted() {
            dpPlayer = this.$refs.player.dp;
            this.player = dpPlayer;
            /*player.on('stats', function (stats) {
                _totalP2PDownloaded = stats.totalP2PDownloaded;
                _totalP2PUploaded = stats.totalP2PUploaded;
                this.updateStats();
            });*/
        },
        methods: {
            init(){
                /*this.player.on('stats', function (stats) {
                    _totalP2PDownloaded = stats.totalP2PDownloaded;
                    _totalP2PUploaded = stats.totalP2PUploaded;
                    this.updateStats();
                });*/
                /*dp.on('peerId', function (peerId) {
                    _peerId = peerId;
                });
                dp.on('peers', function (peers) {
                    _peerNum = peers.length;
                    updateStats();
                });*/

            },
            play() {
                console.log('play callback')
            },
            switchHandle() {
                this.player.switchVideo({
                    url: 'http://static.smartisanos.cn/common/video/video-jgpro.mp4'
                })
            },
            updateStats() {
                var text = 'CDNBye P2P正在为您加速' + (_totalP2PDownloaded/1024).toFixed(2)
                    + 'MB 已分享' + (_totalP2PUploaded/1024).toFixed(2) + 'MB' + ' 连接节点' + _peerNum + '个';
                document.getElementById('stats').innerText = text
            },
            playUrl() {
                let url = this.inputUrl;
                function checkURL(url){
                    var str = url;
                    var Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
                    var objExp = new RegExp(Expression);
                    if(objExp.test(str) == true){
                        return true;
                    }else{
                        return false;
                    }
                }

                var isUrl = checkURL(url);
                if(isUrl){
                    var dpPlayer = this.$refs.player.dp;
                    this.playerOptions.video.src = url;

                    this.player.switchVideo({
                        url: url
                    })
                    this.player.play();
                    // this.init();
                    //
                    // alert('开始播放');
                }else{
                    alert('链接有误');
                }
            }
        }
    }
</script>

<style scoped lang="less">
    #player,#player-show{
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding:0;
        margin: 0;
    }
    #player-show{
        width: 100%;
        height: calc(~'100% - 60px') !important;
        background-color: #000;
    }
    #buttom{
        height: 60px;
        width: 100vw;
        line-height: 60px;
        padding:0;
        background-color: #2E2E36;
        .item{
            cursor: pointer;
            font-size: 20px;
            color: #fff;
        }
        .play:hover{
            color:#FF5C38;
        }
        .time{
            font-size: 10px;
        }
        .no-drag-div-right{
            position: fixed;
            z-index: 100001;
            width: 25px;
            height: 60px;
            right: -2px;
            bottom: 0;
            -webkit-app-region: no-drag !important;
        }
        .no-drag-div-left{
            position: fixed;
            z-index: 100001;
            width: 25px;
            height: 60px;
            left: -2px;
            bottom: 0;
            -webkit-app-region: no-drag !important;
        }
    }
    .input-wrapper{
        display: inline-block;
        max-width: 410px;
        min-width:200px;
        width: calc(~'100% - 425px');
        border-collapse: separate;
        position: relative;
        vertical-align: middle;
        line-height: normal;
        margin-left: 280px;
        z-index: 100000;
        input{
            display: inline-block;
            width: calc(~'100% - 100px');
            position: relative;
            height: 30px;
            padding-left: 15px;
            font-size: 15px;
            background-color: #25252E;
            border-bottom-left-radius: 20px;
            border-top-left-radius: 20px;
            border: none;
        }
        .input-group-append, .input-group-prepend {
            display: inline-block;
            width: 70px;
            padding: 6px 7px;
            font-size: 15px;
            color: #fff;
            text-align: center;
            margin-left: -6px;
            border-bottom-right-radius: 25px;
            border-top-right-radius: 25px;
            background-color: #3F3F4E;
        }
        .input-group-append:hover{
            background-color: #FF5C38;
        }
    }
</style>
<style lang="less">
    .dplayer{
        height: 100% !important;
        position: relative;
    }
    .dplayer-menu,.dplayer-menu.dplayer-menu-show{
        display: none !important;
    }
    .dplayer-controller{
        opacity: 1 !important;
        -webkit-transform: translateY(0) !important;
        transform:translateY(0) !important;
        position: fixed !important;
        bottom: 0 !important;
        height: 60px !important;
        padding:0 !important;
        .dplayer-bar-wrap{
            bottom: 52px !important;
        }
        .dplayer-icons{
            bottom: 10px !important;
        }
        .dplayer-bar-wrap{
            width: 100% !important;
        }
        .dplayer-icons-left{
            margin-left: 20px !important;
        }
        .dplayer-icons-right{
            -webkit-app-region: no-drag !important;
        }
        .dplayer-volume-bar-wrap{
            .dplayer-volume-bar{
                width: 70px !important;
                .dplayer-volume-bar-inner{
                    .dplayer-thumb{
                        cursor: pointer;
                        transform: scale(1) !important;
                    }
                }
            }
        }
    }
    .dplayer-paused{
        .dplayer-bezel{
            .dplayer-bezel-icon{
                opacity: 1 !important;
            }
        }
    }
    .dplayer > .dplayer-controller-mask{
        opacity: 1 !important;
        -webkit-transform: translateY(0) !important;
        transform:translateY(0) !important;
    }
    .dplayer .dplayer-icon,.dplayer-volume-bar-wrap,.dplayer .dplayer-setting-box{
        -webkit-app-region: no-drag !important;
    }

    @media screen and (max-width:620px){
        .input-wrapper{
            display: none !important;
        }
    }
    @media screen and (max-width:410px){
        #player{
            .dplayer-controller .dplayer-camera-icon,.dplayer-controller .dplayer-setting{
                display: none !important;
            }
        }
    }
    @media screen and (max-width:325px){
        #player{
            .dplayer-controller .dplayer-full{
                display: none !important;
            }
        }
    }
</style>